<template>
  <div id="zping-top">
    <div v-for="(item, i) in itemList" :key="i">
      <div id="ping-top">
        <div id="ping-left">
          <img id="ping-pic" :src="pci(i)" />
        </div>
        <div id="ping-right">
          <div id="ri-na">
            <div id="nickname">{{ item.author.nickname }}</div>
            <span>{{ getTime(item.createTime) }}</span>
          </div>
          <div id='start'>
            <start :scorer="JSON.parse(item.extraData).avgScore"></start>
            <div id="fenshu">{{ JSON.parse(item.extraData).avgScore }}分</div>
          </div>
       
        </div>
      </div>
         <div id="wenzi">{{item.content}}</div>
    </div>
  </div>
</template>
<script>
import start from "./start.vue";
export default {
  name: "pingjia",
  data() {
    return {
      itemList: [],
      createTime: [],
      id: 0,
    };
  },
  methods: {
    huoqu() {
      this.axios
        .get(
          `/pingjia/api/web/jiaxiao/dianping-preview-list.htm?reverse=true&_r=16100710341168530062&topic=${this.id}&placeToken=f1c24bac914c468bbdf47b7d9802f8e7`
        )
        .then((res) => {
          console.log(res.data);
          this.itemList = res.data.data.itemList;
        });
    },
    getTime(data) {
      var date = new Date(data);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + "-" + month + "-" + day;
    },
    jieshou() {
      this.id = sessionStorage.getItem("id");
    },
    pci(i) {
      return this.itemList[i].author.avatar;
    },
  },
  components: {
    start,
  },
  props: {},
  created() {
    this.jieshou();
    this.huoqu();
  },
  watch: {
    $route(to, from) {
      if (from.path == "/") {
        this.jieshou();
        this.huoqu();
      }
    },
  },
};
</script>
<style scoped>
#zping-top {
  margin-top: 2vh;
}
#ping-top {
  width: 100%;
  height: 13.5vh;
  display: flex;
  margin-top: 2vh;
}
#ping-right {
  height: 100%;
  width: 80%;
}
#ping-left {
  height: 100%;
  width: 20%;
}
#ping-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
#nickname {
  width: 20vw;
  height: 4vh;
  font-size: 2.5vh;

  white-space: nowrap;
  margin-left: 2vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ri-na {
  display: flex;
}
#start{
  display: flex;
}
#fenshu{
  margin-left: 1vw;
}
#wenzi{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5vh;
}
</style>